<template>
  <div
    id="login_back"
    :style="{ backgroundImage: 'url(' + background_image + ')' }"
  >
    <div :id="pc ? 'from_back_pc' : 'from_back_mobile'">
      <div id="from">
        <div align="center">
          <p style="font-size: 30px; padding: 10px; color: #909399">
            {{ adress_data.title }}
          </p>
          <p style="font-size: 15px; padding: 5px; color: #c0c4cc">
            {{ adress_data.adress }}
          </p>
        </div>
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="70px"
          size="small"
          label-position="left"
          style="padding: 10px"
        >
          <el-form-item label="用户名" prop="user_name">
            <el-input
              v-model="form.user_name"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="user_password">
            <el-input
              v-model="form.user_password"
              show-password
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <div style="display: flex; flex-wrap: nowrap">
              <div style="width: calc(100% - 112px)">
                <el-input placeholder="请输入验证码" v-model="form.code">
                </el-input>
              </div>
              <div @click="init_code()" style="width: 112">
                <Ucode :identifyCode="identifyCode"></Ucode>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="记住登录">
            <el-checkbox v-model="form.login_status"></el-checkbox>
          </el-form-item>
          <el-button type="primary" @click="onSubmit" style="width: 100%"
            >登录</el-button
          >
        </el-form>
        <div align="right" style="padding: 10px">
          <el-button type="text" @click="$router.push('/register')"
            >注册</el-button
          >
          <el-button type="text" @click="$router.push('/forget')"
            >找回密码</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Ucode from "../sub/Ucode.vue";
export default {
  components: {
    Ucode,
  },
  props: ["pc"],
  data() {
    var validateVcode = (rule, value, callback) => {
      //自定义验证
      if (value === "") {
        callback(new Error("验证码不能为空"));
      } else if ("'" + value + "'" !== this.identifyCode) {
        callback(new Error("验证码错误"));
      } else {
        callback();
      }
    };
    return {
      background_image:
        "https://images.pexels.com/photos/785418/pexels-photo-785418.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", //登录页面组件背景图
      adress_data: {
        //登录界面头部信息
        title: "登录", //标题
        adress: "欢迎登录unit-ui", //简介
      },
      form: {
        //登录表单信息
        user_name: "unitui", //用户名
        user_password: "123456", //用户密码
        code: "",
        login_status: false, //登录状态
      },
      identifyCode: "", //验证码
      user_data: {//登录用户信息
        user_name: "Unitui",
        user_pet_name: "爬山虎",
        user_label: "super_admin",
        user_avatar:'https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
      },
      route_data: require("@/unitui/assets/json/route.json"), //路由json数据，模拟后端返回的json，后端返回数据可以与json文件内容相同
      menu_data: require("@/unitui/assets/json/menu.json"), //菜单数组,模拟后端返回的json，后端返回数据可以与json文件内容相同
      //表单验证
      rules: {
        user_name: [
          { required: true, message: "用户名不能为空", trigger: "change" },
        ],
        user_password: [
          { required: true, message: "密码不能为空", trigger: "change" },
        ],
        code: [{ validator: validateVcode, trigger: "change" }],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs["form"].validate((valid) => {
        //执行规则验证
        if (valid) {
          //通过时执行
          this.init_login();
        } else {
          return false;
        }
      });
    },
    init_login() {
      //点击登录时触发
      sessionStorage.setItem("login_user", JSON.stringify(this.user_data));
      sessionStorage.setItem("route_data", JSON.stringify(this.route_data)); //储存路由数组信息，如果你不适用sessionStorage储存路由信息，则路由初始化会失败，你也可以在这储存后端返回的路由json
      sessionStorage.setItem("menu_data", JSON.stringify(this.menu_data)); //储存菜单信息，用于生成框架内左侧菜单信息
      this.$unit.init_route(); //调用初始化路由功能，依据sessionStorage.getItem("route_data")的信息动态添加路由，要看懂/unitui/unitui_init.js中的内容
      this.$message.success("登录成功，即将为您跳转");
      setTimeout(() => {
        this.$router.push("/home"); //执行路由跳转，默认跳转组件管理
      }, 1500);
    },
    init_code() {
      this.identifyCode =
        "'" + parseInt(Math.random() * (9999 - 1000 + 1) + 1000, 10) + "'";
    },
  },
  mounted() {
    this.init_code()
  },
};
</script>
<style scoped>
#login_back {
  width: 100%;
  height: 100vh;
  background-size: cover;
  position: relative;
}
#from_back_pc {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 450px;
  height: 400px;
  background: rgba(255, 255, 255, 0);
}
#from_back_mobile {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
  height: 400px;
  background: rgba(255, 255, 255, 0);
}
#from {
  width: 100%;
  height: 100%;
  margin-left: 0px;
  background-color: #ffffffe1;
  padding: 0px;
  border-radius: 5px;
}
</style>